<!-- @format -->
<!-- 预览 -->
<template>
  <div class="list_preview_div" v-if="dialogStates">
    <el-dialog v-model="dialogStates" :title="preTitle" :show-close="false" @close="closeFun" class="list_preview_div el-form"
      style="height: 100%" append-to-body :fullscreen='true' draggable>
      <template #header="{ close }">
        <div class="my-header">
          <div>{{ preTitle }}</div>
          <el-button color="#4677C7" style="width: 72px;" @click="close">
            关闭
          </el-button>
        </div>
      </template>
      <div class="file_preview_divs">
        <div :id="wps_wordId" ref="wps_word" style="height: 100%;"></div>
        <!-- <div id="officePreview" ></div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
import { getWpsUrl } from '@/api/document/wps'
// import CreatWpsView from "@/utils/wpsOffice/creatSdk";
import { generateId } from "@/utils/util";

export default {
  name: 'pdfPreview',
  props: {
    preTitle: {
      type: String,
      default: ''
    },
    docType: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      dialogStates: false,
      showUrl: '',
      // instance: undefined,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.setWpsHeight();
    })
  },
  methods: {
    // setWpsHeight() {
    //   // 使用closest函数查找最近的祖先元素，该元素具有指定的类名
    //   var closestParent = document.querySelector('.file_preview_divs')
    //   // 获取父元素的高度
    //   const wpsClientHeight = closestParent.clientHeight;
    //   // 设置 Office 容器的高度
    //   this.$refs.wps_word.style.height = wpsClientHeight - 20 + 'px';
    // },
    getFilsUrl(id) {
      getWpsUrl(id).then(res => {
        let { code, data } = res
        console.log(code);
        console.log(data);
        this.showUrl = data.link
        this.dialogStates = true;
        this.$nextTick(() => {
          this.initPreview()
        })
      })
    },
    async initPreview() {
      console.log(this.$refs.wps_word, this.wps_wordId, this.showUrl);
      try {
        this.instance = await new WebOfficeSDK({
          mode: 'nomal',
          mount: this.$refs.wps_word,
          url: this.showUrl, // 文字自定义配置
          wordOptions: {
            isShowDocMap: false, // 是否开启目录功能，默认开启
            mobile: {
              isOpenIntoEdit: false, // （Mobile）要有编辑权限，移动端打开时是否进入编辑
            }
          },
          // 自定义的命令栏
          commandBars: [
            {
              // 命令栏的 ID
              cmbId: "FloatQuickHelp", // 右下角帮助（金小獴）
              // 命令栏的属性设置
              attributes: {
                // 隐藏命令栏
                visible: false, // 隐藏组件
                // 禁用命令栏（组件显示但不响应点击事件）
                enable: false, // 禁用组件（组件显示但不响应点击事件）
              },
            },
          ],
        })
        await this.instance.advancedApiReady();
        // const wpsView = new CreatWpsView(this.$refs.wps_word, this.wps_wordId, this.showUrl, {}, '.file_preview_divs');
        // // 等待creatShadowDOM执行完成，并获取其返回值
        // this.instance = await wpsView.creatShadowDOM();
      } catch (e) {
        console.log(e);
      }
    },
    closeFun() {
      this.dialogStates = false
    }
  },
  computed: {
    wps_wordId() {
      return "wps_word" + generateId();
    }
  },
  filters: {}
}
</script>
<style lang="scss">
.list_preview_div {
  .el-dialog__body {
    height: calc(100% - 50px) !important;
  }
}
</style>
<style lang="scss" scoped>
.my-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.list_preview_div {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 999;
  width: 100%;
  height: 100%;
  padding: 10px 10px 0 10px;
  background: #eeeeef;



  .preview_header_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 16px;
    font-weight: bold;
    background: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .file_preview_divs {
    background: #eee;
    flex: 1;
    overflow: hidden;
    height: 100%;

    .preview_iframe {
      height: 100%;
      width: 100%;
      margin: -2px;
    }
  }
}
</style>
